<template>
    <el-config-provider
        :locale="messages[locale] as any"
        :size="config.size"
        :zIndex="config.zIndex"
        :button="config.button"
    >
        <router-view></router-view>
    </el-config-provider>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import DisableDevtool from 'disable-devtool'
import colorTool from '@/utils/color'
import { useSysGlobalStore } from '@/stores/global.ts'
import appConfig from '@/config'

const { locale, messages } = useI18n()
const sysGlobalStore = useSysGlobalStore()

const isAllowDebug = appConfig.BAN_DEBUG

// 响应式数据
const config = ref({
    size: 'default' as 'large' | 'default' | 'small',
    zIndex: 2000,
    button: {
        autoInsertSpace: false
    }
})

// 设置主题颜色
const setTheme = () => {
    const app_color = sysGlobalStore.sysColor
    if (app_color) {
        document.documentElement.style.setProperty('--el-color-primary', app_color)
        for (let i = 1; i <= 9; i++) {
            document.documentElement.style.setProperty(
                `--el-color-primary-light-${i}`,
                colorTool.lighten(app_color, i / 10)
            )
        }
        for (let i = 1; i <= 9; i++) {
            document.documentElement.style.setProperty(
                `--el-color-primary-dark-${i}`,
                colorTool.darken(app_color, i / 10)
            )
        }
    }
    // 设置暗黑模式
    document.documentElement.classList[sysGlobalStore.sysDark ? 'add' : 'remove']('dark')
}

// 禁止调试
const banDevtool = () => {
    if (isAllowDebug == 'true') {
        DisableDevtool({
            url: 'about:blank',
            timeOutUrl: 'about:blank',
            disableMenu: false
        })
    }
}

// 组件创建时执行
onMounted(async () => {
    setTheme()
    banDevtool()
    await sysGlobalStore.getLang()

    console.log('[App.vue] onMounted：组件已挂载')
})

// 组件挂载前执行（验证是否进入组件）
onBeforeMount(() => {
    console.log('[App.vue] onBeforeMount：组件即将挂载')
})

// 组件卸载前执行（验证是否被意外卸载）
onUnmounted(() => {
    console.log('[App.vue] onUnmounted：组件即将卸载')
})
</script>
